<script setup lang="ts">
import {onUpdated, ref} from 'vue'
import {genElementSFC, genElementVue3SFC} from "@/utils/generator/sfc-generator.ts";
import CodeEditor from "@/components/CodeEditor/index.vue";


const dialogVisible = ref(false)

const title = ref('Vue3代码')

const handleClose = () => {
  dialogVisible.value = false
}

const designForm = ref({})
const codeContent = ref("")



const open = (formConfig, formDesigner) => {
  dialogVisible.value = true
  designForm.value = {
    formConfig,
    formDesigner
  }

  // 通过 formConfig 配置生成对应的 form 表单
  codeContent.value = genElementVue3SFC(formConfig, formDesigner)
  console.log("codeContent",  codeContent.value)
}



defineExpose({
  open
})
</script>

<template>
  <el-dialog v-model="dialogVisible" :title="title" width="60%" :before-close="handleClose">
    <CodeEditor v-model:modelValue="codeContent"/>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary"  @click="handleClose">复制</el-button>
        <el-button @click="handleClose">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>
